<template>
  <div class="bigbox">
    <!-- 页面导航搜索盒子 -->
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="60px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                      v-model="buildingId"
                      :optionlist="qiyelist"
                      @updateModelValue="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="19" style="text-align: right;">
                <el-form-item label="">
                  <el-button  size="small" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="gettablelist()">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      <!-- <div>
        <span style="font-size: 14px;color: #606266;">园区/建筑群</span>
        <span>
          <el-select size="small" v-model="buildingId" @change="changeqiye">
            <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
          </el-select>
        </span>
      </div>
      <div>
        <el-button  size="small" @click="chongzhi">重置</el-button>
        <el-button type="primary" size="small" @click="gettablelist()">查询</el-button>
      </div> -->
    </div>
    <div class="bodybox">
      <div class="zhuti">
        <div class="little newzhen">
          <span @click="dialogVisible=true"  style="cursor: pointer;"><i class="el-icon-plus"></i></span>
        </div>
        <div class="little" v-for="(item,index) in arrlist" :key="index">
          <div class="text">{{ item.buildingName }}</div>
          <div class="text hangnei">
            <div class="nei">公众号名称</div>
            <div class="nei">{{ item.officialAccountName }}</div>
          </div>
          <div class="text hangnei">
            <div class="nei">开发者ID(APPID)</div>
            <div class="nei" >{{ item.appId }}</div>
          </div>
          <div class="text">开发者密钥(APPSecret)</div>
          <div class="text">{{ item.appSecret }}</div>
          <div class="text hangnei">
            <div class="nei">商户号</div>
            <div class="nei">{{ item.merchantNo }}</div>
          </div>
          <div class="text">API密钥</div>
          <div class="text">{{ item.apiSecret }}</div>
          <div class="evente">
            <!-- <span> -->
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i @click="xiugai(item)" class="el-icon-edit" style="color:#1a90fe ; cursor: pointer;font-size: 20px;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i @click="delet(item)" class="el-icon-delete" style="color: red;cursor: pointer;font-size: 20px;"></i>
              </el-tooltip>
            <!-- </span> -->
          </div>
        </div>
      </div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="7"
                @current-change="gettablelist"
                :total="+totalCount">
          </el-pagination>
        </div>
    </div>
    <!-- 新增/修改弹窗 -->
    <div class="dialog">
          <el-dialog
            :title="form.id?'修改微信商户号绑定':'新增微信商户号绑定'"
            :visible.sync="dialogVisible"
            width="40%">
            <div>
              <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="180px">
                <el-divider></el-divider>
                <el-col :span="24">
                  <el-form-item label="建筑群/园区名称" prop="buildingId">
                    <el-select size="small" v-model="form.buildingId" style="width: 100%;" >
                      <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="公众号名称" prop="officialAccountName">
                    <el-input v-model="form.officialAccountName" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                 <el-form-item label="开发者ID(APPID)" prop="appId">
                  <el-input v-model="form.appId" size="small"></el-input>
                 </el-form-item>
                </el-col>
                <el-col :span="24">
                 <el-form-item label="开发者密钥(APPSecret)" prop="appSecret">
                  <el-input v-model="form.appSecret" size="small"></el-input>
                 </el-form-item>
                </el-col>
                <el-col :span="24">
                 <el-form-item label="商户号" prop="merchantNo">
                  <el-input v-model="form.merchantNo" size="small"></el-input>
                 </el-form-item>
                </el-col>
                <el-col :span="24">
                 <el-form-item label="API密钥" prop="apiSecret">
                  <el-input v-model="form.apiSecret" size="small"></el-input>
                 </el-form-item>
                </el-col>
              </el-form>
            </div>
            <span slot="footer" >
              <el-button size="small" @click="sure">保存</el-button>
              <el-button type="primary" size="small" @click="quxiao">取消</el-button>
            </span>
          </el-dialog>
        </div>
  </div>
</template>

<script>
import {getloginlistapi} from '@/api/prwpaid/file-management/Architectural-complex'
import {gettablelistapi,postaddahnghuapi,postputahnghuapi,postdelahnghuapi} from '@/api/prwpaid/configura/wx-Merchant'
export default {
  name: 'CallPoliceIndex',

  data() {
    return {
      form: {},
      dialogVisible:false,
      buildingId:'',
      qiyelist:[],
      pageobj: {
        pageNo: 0,
        pageSize:7
      },
      totalCount: '',
      arrlist: [],
      rules: {
        buildingId: [
        { required: true, message: '请选择建筑群', trigger: 'blur' }
        ],
        officialAccountName: [
        { required: true, message: '请输入公众号名称', trigger: 'blur' }
        ],
        appId: [
        { required: true, message: '请输入开发者ID(APPID)', trigger: 'blur' }
        ],
        appSecret: [
        { required: true, message: '请输入开发者密钥(APPSecret)', trigger: 'blur' }
        ],
        merchantNo: [
        { required: true, message: '请输入商户号', trigger: 'blur' }
        ],
        apiSecret: [
        { required: true, message: '请输入API密钥', trigger: 'blur' }
        ],
      }
    };
  },

  async mounted() {
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.buildingId=localbuildingId?localbuildingId:''
    }else{
      this.buildingId=''
    }

    this.gettablelist()
  },

  methods: {
    // 企业下拉
    changeqiye(val) {
      localStorage.setItem('buildingId', val)
    },
    // 获取表格数据
    async gettablelist(){
      const res = await gettablelistapi({ buildingId: this.buildingId, pageNo:this.pageobj.pageNo-1,pageSize:this.pageobj.pageSize})
      this.arrlist = res.data.list
      this.totalCount=res.data.totalCount
    },
    // 弹窗确定
    async sure() {
      await this.$refs.form.validate()
      this.form.id ? await postputahnghuapi(this.form).then(ele => {
        this.$message.success('修改成功')
      }) : await postaddahnghuapi(this.form).then(ele => {
        this.$message({
         type: ele.code == 200 ? 'success' : 'warning',
         message: ele.code == 200 ? '新增成功':ele.message
        })
      })
      this.quxiao()
      this.gettablelist()
    },
    // 修改
    xiugai(value) {
      this.dialogVisible = true
      this.form={...value}
    },
    // 删除
    delet(val) {
      this.$confirm('此操作将永久删除该档案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await postdelahnghuapi({ id: val.id })
          this.gettablelist() 
          this.$message({
            type: res.code == 200 ? 'success' : 'warning',
              message: res.code == 200 ? '删除成功':res.message
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 弹窗取消
    quxiao() {
      this.form = {}
      this.dialogVisible = false
      this.$refs.form.resetFields()
    },
    // 重置
    chongzhi() {
      localStorage.removeItem('buildingId');
      this.buildingId = ''
      this.gettablelist()
    }
  },
};
</script>

<style lang="scss" scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    .zhuti{
      height: 95%;
      display: flex;
    flex-wrap: wrap;
        overflow: hidden;
        overflow: auto;
    }
    .fenye{
      text-align: right;
    }
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;

    .newzhen{
      line-height: 340px;
      text-align: center;
      i{
        color: #1890FF;
        font-size: 100px;
      }
    }
    .little{
      // width: 292px;
      margin-right: 1%;
      width: 24%;
      height: 340px;
      border: 1px solid #1890FF;
      padding: 30px;
      margin-bottom: 20px;
      .text{
        margin-bottom: 10px;
      }
      .hangnei{
        display: flex;
        .nei{
          width: 50%;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
        }
      }
      .evente{
        display: flex;
        justify-content: space-around;
        margin-top: 5px;
      }
    }
  }
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-dialog__body{
  padding: 20px !important;
  }
  ::v-deep .el-col-24{
    margin-bottom: 5px;
  }
  ::v-deep .el-form-item__error{
    padding-top: 0;
    font-size: 10px;
  }
</style>